<script lang="ts" setup>
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import { Message, Modal } from '@arco-design/web-vue';
  import { getDeviceBindLogs, unbindElderDevice } from '@/api-new/devices';
  import AddModal from './add-modal.vue';

  // 定义表格列

  /**
   *  
   "deviceId": "string",
  "elderName": "string",
  "elderId": "string",
  "elderPhone": "string",
  "elderIdCardNo": "string",
  "institutionName": "string",
  "affiliatedYear": "string",
  "bindTime": "2019-08-24T14:15:22.123Z",
  "bindEnd": "string",
  "bindStatus": "string",
  "deviceStatus": "string"
   */

  const columns = [
    {
      title: '设备编码',
      width: '160',
      dataIndex: 'deviceId',
    },
    {
      title: '设备名称',
      width: '160',
      tooltip: true,
      ellipsis: true,
      dataIndex: 'deviceName',
    },
    {
      title: '设备型号',
      width: '160',
      dataIndex: 'modelCode',
    },
    {
      width: '120',
      title: '绑定长者',
      dataIndex: 'elderName',
    },
    {
      title: '长者ID',
      width: '150',
      dataIndex: 'elderId',
    },
    {
      title: '长者手机号码',
      width: '200',
      dataIndex: 'elderPhone',
    },
    {
      title: '长者身份证号',
      width: '200',
      dataIndex: 'elderIdCardNo',
    },
    {
      title: '长者归属机构',
      width: '140',
      dataIndex: 'institutionName',
    },
    {
      title: '长者归属年度',
      width: '140',
      dataIndex: 'affiliatedYear',
    },
    {
      title: '绑定时间',
      width: '200',
      tooltip: true,
      ellipsis: true,
      dataIndex: 'bindTime',
    },
    {
      title: '绑定截至日期',
      width: '200',
      tooltip: true,
      ellipsis: true,
      dataIndex: 'bindEnd',
    },
    {
      title: '绑定状态',
      width: '120',
      dataIndex: 'bindStatus',
    },
    {
      title: '设备运营状态',
      width: '120',
      dataIndex: 'deviceStatus',
    },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
      align: 'center' as const,
    },
  ];

  const page = usePageTable({
    searchForm: {
      state: {
        elderName: '',
        elderIdCardNo: '',
        elderPhone: '',
        bindStatus: '',
      },
    },
    table: {
      rowKey: 'deviceId',
      fakePage: true,
      apiFun: getDeviceBindLogs,
      columns,
    },
  });

  const unBind = (record: any) => {
    Modal.warning({
      title: '警告',
      content: '确定要解除绑定吗？',
      okText: '确定',
      cancelText: '取消',
      hideCancel: false,
      onBeforeOk(done) {
        unbindElderDevice({
          elderId: record.elderId,
          deviceId: record.deviceId,
        })
          .then(() => {
            done(true);
            Message.success('解绑成功');
            page.reload();
          })
          .catch(() => {
            done(false);
          });
      },
    });
  };

  const handler = useModeModalHandler({
    onSuccess() {
      page.reload();
    },
  });

  const scroll = {
    x: 2200,
  };
</script>

<template>
  <div class="flex flex-col">
    <TableLayout
      :scroll="scroll"
      :scrollbar="true"
      v-bind="page.bindProps"
      @create="handler.showAdd"
    >
      <template #searchForm="{ state }">
        <a-form-item field="elderName" label="长者姓名">
          <a-input
            v-model="state.elderName"
            placeholder="请输入长者姓名"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="elderPhone" label="手机号码">
          <a-input
            v-model="state.elderPhone"
            placeholder="请输入手机号码"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="elderIdCardNo" label="身份证号">
          <a-input
            v-model="state.elderIdCardNo"
            placeholder="请输入身份证号"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="bindStatus" label="绑定状态">
          <a-select
            v-model="state.bindStatus"
            placeholder="请选择绑定状态"
            allow-clear
          >
            <a-option value="1">已绑定</a-option>
            <a-option value="2">已解绑</a-option>
          </a-select>
        </a-form-item>
      </template>

      <template #action="{ record }">
        <a-space>
          <a-button
            :disabled="record.bindStatus != '绑定'"
            type="text"
            @click="unBind(record)"
          >
            解绑
          </a-button>
        </a-space>
      </template>
    </TableLayout>

    <!-- 编辑弹窗 -->
    <AddModal v-bind="handler.bindProps" />
  </div>
</template>
